<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<script type="text/javascript">
	//获取JSON信息
	function checkUserName() {
		var xmlHttp;
		var userName = document.getElementById("userName").value;//获取用户输入的用户名
		if(userName=="")return;//为空不查询，也可以在这里处理非法字符
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		//设置回调函数，有点像java的匿名内部类用法
		xmlHttp.onreadystatechange=function(){
			//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				//alert(xmlHttp.responseText);
				var dataObj = eval("("+xmlHttp.responseText+")");
				switch (dataObj.exist) {
				case -2:
					document.getElementById("tip").innerHTML="<img src=\"img/no.png\"/>&nbsp;&nbsp;带有非法字符*/\\";
					break;
				case -1:
					document.getElementById("tip").innerHTML="<img src=\"img/no.png\"/>&nbsp;&nbsp;没有输入";
					break;
				case 0:
					document.getElementById("tip").innerHTML="<img src=\"img/no.png\"/>&nbsp;&nbsp;该用户名已存在";
					break;
				case 1:
					document.getElementById("tip").innerHTML="<img src=\"img/ok.png\"/>&nbsp;&nbsp;该用户名可用";
					break;
				default:
					break;
				}
			}
		}
		//
		xmlHttp.open("get", "getAjaxInfo?action=checkUserName&userName="+userName, true);//使用get方式，异步请求getAjaxInfo
		xmlHttp.send();
	}
</script>
</head>
<body>
<table align="center" style="border: 5px;padding-top: 20px">
	<tr>
		<th colspan="2" style="background: gray;color: blue;font-size: 30px;">用户注册</th>
	</tr>
	<tr>
		<td>用户名：</td>
		<td><input type="text" id="userName" name="userName" onblur="checkUserName()"/>&nbsp;&nbsp;<font id="tip"></font></td>
	</tr>
	<tr>
		<td>密码：</td>
		<td><input type="text" id="password" name="password"/></td>
	</tr>
	<tr>
		<td>确认密码：</td>
		<td><input type="text" id="password" name="password"/></td>
	</tr>
	<tr>
		<td align="left"><input type="submit" value="注册"/></td>
		<td align="right"><input type="button" value="重置"/></td>
	</tr>
</table>
</body>
</html>